Implemented a production-ready global dark mode system for the DevPath application - #160

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

Pull request overview

Adds a global dark-mode system to the Flask-based DevPath site: a synchronous anti-FOUC bootstrap in each template, persistent localStorage preference with prefers-color-scheme fallback, accessible desktop + mobile toggle buttons, dark-mode CSS variable overrides, and component-specific contrast adjustments.

Changes:

• Introduce html[data-theme="dark"] variable overrides plus component-specific dark-mode rules and a toggle-button style in static/style.css.
• Add a self-contained theme engine (initTheme/applyTheme, delegated click handler, screen-reader announcement region) to static/script.js, plus aria-expanded polish on the mobile-nav handler.
• Add accessible toggle buttons (desktop + mobile) and a duplicated anti-FOUC inline script to templates/index.html, templates/project.html, and templates/404.html; project.html also gains the previously missing mobile menu.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 11 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

This is a substantial and promising contribution. The effort put into implementing a global dark mode system across the DevPath UI is clearly visible, and the screenshots show thoughtful work across desktop and mobile layouts.

The overall visual direction is strong:

• branding is mostly preserved
• dark surfaces are reasonably cohesive
• multiple shared components were adapted consistently
• mobile navigation support was considered

However, because this PR affects global styling and shared UI architecture, it requires a much stricter review standard before merge.

Current blockers:

• the PR has unresolved merge conflicts
• global CSS/theme changes need maintainability review
• accessibility contrast and focus-state visibility need validation
• theme persistence/system preference behavior is not clearly demonstrated
• we need to ensure the implementation uses reusable theme variables/tokens instead of scattered hardcoded color overrides

Dark mode touches nearly every shared component in the application, so regressions here can impact the entire project if merged prematurely.

Before this can be approved, please:

• resolve all merge conflicts cleanly against latest main
• verify responsive behavior across major breakpoints
• validate accessibility contrast/readability
• confirm persistent theme handling
• ensure the theme system remains maintainable and scalable

Once those are addressed, this can be re-reviewed carefully.

Here's how to address all 7 Copilot review comments:

1. Duplicated theme code across 3 templates (index.html, project.html, error templates)
Extract the theme init script and toggle markup into a partial (templates/_theme_init.html and templates/_theme_toggle.html) and {% include %} them.

2. Mobile theme toggle collapses the menu (templates/index.html + script.js)
Remove nav-mobile-link class from the mobile theme toggle button, or exclude .theme-toggle from the auto-close handler:

document.querySelectorAll('.nav-mobile-link:not(.theme-toggle)').forEach(...)

3. Same issue on project.html (templates/project.html)
Same fix as #2.

4. Inline styles on mobile toggle (templates/index.html + project.html)
Move style declarations into a CSS class:

.nav-mobile-link.theme-toggle {
  background: none; border: none; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 0; font-size: 0.95rem; font-weight: 500;
}

5. CSS ::before label not accessible (static/style.css)
Toggle visible text via JavaScript alongside aria-label instead of relying on CSS generated content.

6. .theme-ready class has no matching CSS rule
Either add the transition rule that was intended:

.theme-ready * { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }

Or remove the dead .theme-ready code from script.js.

7. No matchMedia change listener (static/script.js)
Optionally subscribe to OS theme changes when user has no saved preference:

var mq = window.matchMedia('(prefers-color-scheme: dark)');
mq.addEventListener('change', function(e) {
  if (!localStorage.getItem('devpath-theme')) {
    applyTheme(e.matches ? 'dark' : 'light');
  }
});

Thanks for addressing the review feedback.

I performed a full re-review of the updated PR. The primary blocker from the previous review has been resolved: both starter_code files now contain actual executable starter implementations rather than primarily documentation-style content.

Verified improvements:

• movie_recommender.py now includes dataset loading, preprocessing, similarity calculation, recommendation logic, and runnable CLI flow.
• sentiment_app.py now includes a working Flask scaffold, sample training data, vectorization, model training, prediction logic, and a runnable web interface.
• TODO guidance has been added appropriately for future expansion.
• Project descriptions, roadmaps, and resources have been improved.
• Merge conflicts have been resolved and the scope remains aligned with Issue #68.

There are still some areas that could be improved in future contributions (resource specificity, difficulty calibration, and template-based Flask structure), but they are not significant enough to block this contribution.

Approved. Thank you for incorporating the requested changes.